package cn.edu.baiyunu.myapplication.ui.screens.transactions.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Event
import androidx.compose.material.icons.filled.Notes
import androidx.compose.material.icons.filled.Schedule
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.edu.baiyunu.myapplication.data.model.Category
import cn.edu.baiyunu.myapplication.ui.components.Icon
import cn.edu.baiyunu.myapplication.ui.utils.formatDateTime
import cn.edu.baiyunu.myapplication.ui.utils.formatToDateString
import cn.edu.baiyunu.myapplication.ui.utils.getIconByName

/**
 * 交易详情卡片，显示交易的详细信息
 * 
 * @param category 交易分类
 * @param date 交易日期时间戳
 * @param note 交易备注（可选）
 * @param createdAt 创建时间时间戳
 * @param modifier 修饰符
 */
@Composable
fun TransactionDetailCard(
    category: Category?,
    date: Long,
    note: String,
    createdAt: Long,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(20.dp))
            .background(Color.White.copy(alpha = 0.1f))
            .padding(25.dp)
    ) {
        Column {
            // 分类信息
            DetailItem(
                icon = category?.let { getIconByName(it.icon) } ?: Icons.Default.Notes,
                label = "分类",
                value = category?.name ?: "未知分类"
            )
            
            Spacer(modifier = Modifier.height(20.dp))
            
            // 日期信息
            DetailItem(
                icon = Icons.Default.Event,
                label = "日期",
                value = formatToDateString(date)
            )
            
            Spacer(modifier = Modifier.height(20.dp))
            
            // 备注信息
            DetailItem(
                icon = Icons.Default.Notes,
                label = "备注",
                value = if (note.isNotBlank()) note else "无备注",
                valueOpacity = if (note.isBlank()) 0.5f else 1f
            )
            
            // 分隔线
            Divider(
                color = Color.White.copy(alpha = 0.1f),
                thickness = 1.dp,
                modifier = Modifier.padding(vertical = 20.dp)
            )
            
            // 记录时间
            DetailItem(
                icon = Icons.Default.Schedule,
                label = "记录时间",
                value = formatDateTime(createdAt)
            )
        }
    }
}

/**
 * 详情项，显示具体的详细信息项
 * 
 * @param icon 图标
 * @param label 标签文本
 * @param value 值
 * @param valueOpacity 值的不透明度
 */
@Composable
fun DetailItem(
    icon: ImageVector,
    label: String,
    value: String,
    valueOpacity: Float = 1f
) {
    Row(
        verticalAlignment = Alignment.Top
    ) {
        // 图标
        Box(
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .background(Color.White.copy(alpha = 0.1f)),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = icon,
                contentDescription = label,
                tint = Color.White
            )
        }
        
        // 内容
        Column(
            modifier = Modifier
                .padding(start = 15.dp)
                .weight(1f)
        ) {
            Text(
                text = label,
                fontSize = 14.sp,
                color = Color.White.copy(alpha = 0.7f)
            )
            
            Spacer(modifier = Modifier.height(5.dp))
            
            Text(
                text = value,
                fontSize = 16.sp,
                color = Color.White.copy(alpha = valueOpacity)
            )
        }
    }
} 